<!--
 * @Author: your name
 * @Date: 2022-01-07 10:13:55
 * @LastEditTime: 2023-08-07 13:06:17
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\views\statistical-report\exception-report\index.vue
-->
<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <Search
        :day="true"
        :status="true"
        :search-list="reset"
        @search-list="searchList"
      >
        <template v-slot:left>
          <div
            v-if="status"
            class="label-input mr-20"
          >
            <div class="label">选择承租户:</div>
            <div class="input">
              <el-select
                v-model="reset.lesseeNo"
                filterable
                clearable
              >
                <el-option
                  value=""
                  label="所有承租户"
                />
                <el-option
                  v-for="item in lesseeList"
                  :key="item.lesseeNo"
                  :label="item.lesseeName"
                  :value="item.lesseeNo"
                />
              </el-select>
            </div>
          </div>
          <div class="label-input mr-20">
            <div class="label">批次名称:</div>
            <div class="input">
              <el-select
                v-model="reset.batchNo"
                style="width:220px"
                filterable
                clearable
              >
                <el-option
                  value=""
                  label="所有批次"
                />
                <el-option
                  v-for="item in batchList"
                  :key="item.batchNo"
                  :label="item.batchName"
                  :value="item.batchNo"
                />
              </el-select>
            </div>
          </div>
        </template>
        <template v-slot:right>
          <div class="search ml-20">
            <img
              src="~@/assets/action-bar-icon/search.png"
              @click="search"
            />
          </div>
          <div class="search ml-20">
            <img
              src="~@/assets/statistical-report/reset.png"
              @click="resets"
            />
          </div>
          <div class="search ml-20">
            <img
              src="~@/assets/statistical-report/export.png"
              @click="open"
            />
          </div>
        </template>
      </Search>
      <Time />
    </template>
    <template v-slot:content>
      <!-- 基地权限 -->
      <div
        v-if="status"
        class="main-boxone"
      >
        <!-- 农事作业次数 -->
        <Main class="lesseeOutput">
          <template v-slot:top-name>
            农事作业次数
          </template>
          <template v-slot:main-content>
            <zhechart
              :cdata="farmtaskcdata"
              :nowheight="'220px'"
              :nowwidth="'99%'"
            />
          </template>
        </Main>
        <!-- 农事作业明细 -->
        <Main class="outputdetails">
          <template v-slot:top-name>
            农事作业明细
          </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="pestdetailsData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  label="批次名称"
                  prop="batchName"
                  min-width="140"
                />
                <el-table-column
                  label="农事作业类型"
                  prop="agriculturalWorkType.agriculturalWorkTypeName"
                />
                <el-table-column label="执行人">
                  <template slot-scope="scope">
                    {{ scope.row.personBOList && scope.row.personBOList.length ? scope.row.personBOList[0].name : '' }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="投入农资"
                  prop="inputsRecordBOList"
                >
                  <template slot-scope="scope" v-if="scope.row.agriculturalTaskId">
                    <el-button
                      class="text-btn-cursor"
                      type="text"
                      size="small"
                      @click="checkFacility(scope.row)"
                    >
                      <i class="el-icon-view"></i> 查看
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="执行时间"
                  min-width="140"
                >
                  <template slot-scope="scope" v-if="scope.row.agriculturalTaskNo">
                    {{ scope.row.execStartTime }} - {{ scope.row.execEndTime }}
                  </template>
                </el-table-column>
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              />
            </div>
            <div class="agricultural-statistics">
              <el-carousel
                arrow="never"
                :autoplay="false"
              >
                <el-carousel-item
                  v-for="(item, index) in abatchList"
                  :key="index"
                >
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <i></i>
                      <div class="imgl-top">
                        {{ item1.lessee }}
                      </div>
                      <div class="imgdet-left">
                        <div class="shadows-top">
                          {{ item1.assetDate }} -
                          {{ item1.completionDate || "暂无" }}
                        </div>
                        <div class="shadows-main">
                          <h4>批次名称</h4>
                          <p>{{ item1.batchName }}</p>
                        </div>
                        <div class="shadows-main">
                          <h4>执行农事作业次数</h4>
                          <p v-if="item1.productionTimes">{{ item1.productionTimes }} 次</p>
                        </div>
                        <div class="shadows-bottom">
                          <h4>执行农事作业类型</h4>
                          <div class="ma-box">
                            <span
                              v-for="(work, indexs) in item1.workTypeList"
                              :key="indexs"
                            >
                              <span>{{ work.name }}</span>
                              <b>{{ work.value || 0 }}</b>
                            </span>
                          </div>
                        </div>
                      </div>
                      <div class="imgdet-right">
                        <piechart
                          :cdata="item1.nowMonthTaskPie"
                          :nowheight="'247px'"
                          :nowwidth="'420px'"
                        />
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
        <!-- 农资投入金额 -->
        <Main
          v-if="agriculturalStauts"
          class="agriculturalOutput"
        >
          <template v-slot:top-name>
            农资投入金额
          </template>
          <template v-slot:main-content>
            <div class="label-input mr-20">
              <div class="label">选择农资:</div>
              <div class="input">
                <el-select
                  v-model="reset.materialNo"
                  placeholder="农资名称"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in queryagriculturalMaterialList"
                    :key="item.materialNo"
                    :label="item.materialName"
                    :value="item.materialNo"
                  />
                </el-select>
              </div>
              <div class="search ml-20">
                <img
                  src="~@/assets/action-bar-icon/search.png"
                  @click="agriculturalsearch"
                />
              </div>
            </div>
            <zhechart
              :cdata="agriculturalcdata"
              :nowheight="'220px'"
              :nowwidth="'99%'"
            />
          </template>
        </Main>
        <!-- 农资投入明细 --不选农资 -->
        <Main
          v-if="agriculturalStauts"
          class="agriculturaldetails"
        >
          <template v-slot:top-name>
            农资投入明细
          </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="agriculturalData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  label="农资名称"
                  prop="materialDTO.materialName"
                  min-width="140"
                />
                <el-table-column
                  label="投入量"
                  prop="assetQuantity"
                />
                <el-table-column
                  label="投入金额"
                  prop="assetValue"
                >
                </el-table-column>
                <el-table-column
                  label="经手人"
                  prop="personName"
                >
                </el-table-column>
                <el-table-column
                  v-if="false"
                  label="农资图片"
                >
                  <template>
                    <el-button type="text">查看图片</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="投入时间"
                  prop="assetDate"
                >
                </el-table-column>
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPages"
                :total-size="totalSizes"
                @changePageSize="changePageSizes"
                @changeCurrentPage="changeCurrentPages"
              />
            </div>
            <div
              v-if="agriculturalConList.length !== 0"
              class="agricultural-statistics"
            >
              <el-carousel
                arrow="never"
                :autoplay="false"
              >
                <el-carousel-item
                  v-for="(item, index) in agriculturalConList"
                  :key="index"
                >
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.agriculturalMaterialName }}
                      </div>
                      <div class="shadows-main">
                        <h4>总投入量</h4>
                        <p>
                          <span>{{ item1.assetQuantity }}</span>{{ item1.unitName }}
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>亩均投入量</h4>
                        <p>
                          <span>{{ item1.assetQuantityMu }}</span>{{ item1.unitName }}/亩
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总金额</h4>
                        <p>
                          <span>{{ item1.assetValue }}</span>元
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div
              v-if="agriculturalAbatchList.length !== 0"
              class="batch-statistics"
            >
              <el-carousel
                arrow="never"
                :autoplay="false"
              >
                <el-carousel-item
                  v-for="(item, index) in agriculturalAbatchList"
                  :key="index"
                >
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.lessee }}
                      </div>
                      <div class="shadows-main">
                        <h4>批次名称</h4>
                        <p>
                          <span>{{ item1.batchName }}</span>
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>农资投入次数</h4>
                        <p>
                          <span>{{ item1.productionTimes }}</span>次
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>投入金额</h4>
                        <p>
                          <span>{{ item1.assetValue }}</span>元
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>执行时间</h4>
                        <p>
                          <span>{{ item1.assetDate }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
        <!-- 农资投入明细 --选农资 -->
        <Main
          v-if="!agriculturalStauts"
          class="agriculturaldetails agriculturaldet"
        >
          <template v-slot:top-name>
            农资投入明细
          </template>
          <template v-slot:main-content>
            <div class="label-input mr-20">
              <div class="label">选择农资:</div>
              <div class="input">
                <el-select
                  v-model="reset.materialNo"
                  placeholder="农资名称"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in queryagriculturalMaterialList"
                    :key="item.materialNo"
                    :label="item.materialName"
                    :value="item.materialNo"
                  />
                </el-select>
              </div>
              <div class="search ml-20">
                <img
                  src="~@/assets/action-bar-icon/search.png"
                  @click="agriculturalsearch"
                />
              </div>
            </div>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="agriculturalData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  label="农资名称"
                  prop="materialDTO.materialName"
                  min-width="140"
                />
                <el-table-column
                  label="投入量"
                  prop="assetQuantity"
                />
                <el-table-column
                  label="投入金额"
                  prop="assetValue"
                >
                </el-table-column>
                <el-table-column
                  label="经手人"
                  prop="personName"
                >
                </el-table-column>
                <el-table-column
                  v-if="false"
                  label="农资图片"
                >
                  <template>
                    <el-button type="text">查看图片</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="投入时间"
                  prop="assetDate"
                >
                </el-table-column>
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPages"
                :total-size="totalSizes"
                @changePageSize="changePageSizes"
                @changeCurrentPage="changeCurrentPages"
              />
            </div>
            <div
              v-if="agriculturalConFrom"
              class="agricultural-statistics"
            >
              <div class="imgl">
                <div class="imgdet">
                  <div class="shadows-top">
                    {{ agriculturalConFrom.agriculturalMaterialName }}
                  </div>
                  <div class="shadows-main">
                    <h4>总投入量</h4>
                    <p>
                      <span>{{ agriculturalConFrom.assetQuantity }}</span>{{ agriculturalConFrom.unitName }}
                    </p>
                  </div>
                  <div class="shadows-bottom">
                    <h4>亩均投入量</h4>
                    <p>
                      <span>{{ agriculturalConFrom.assetQuantityMu }}</span>{{ agriculturalConFrom.unitName }}/亩
                    </p>
                  </div>
                  <div class="shadows-bottom">
                    <h4>总金额</h4>
                    <p>
                      <span>{{ agriculturalConFrom.assetValue }}</span>元
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="agriculturalAbatchList.length !== 0"
              class="batch-statistics"
            >
              <el-carousel
                arrow="never"
                :autoplay="false"
              >
                <el-carousel-item
                  v-for="(item, index) in agriculturalAbatchList"
                  :key="index"
                >
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.lessee }}
                      </div>
                      <div class="shadows-main">
                        <h4>批次名称</h4>
                        <p>
                          <span>{{ item1.batchName }}</span>
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>农资投入次数</h4>
                        <p>
                          <span>{{ item1.productionTimes }}</span>次
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>投入金额</h4>
                        <p>
                          <span>{{ item1.assetValue }}</span>元
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>执行时间</h4>
                        <p>
                          <span>{{ item1.assetDate }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
        <Main class="yielddetails">
          <template v-slot:top-name>
            产量明细
          </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="yieldTableData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  label="承租户名称"
                  prop="lesses"
                />
                <el-table-column
                  label="批次名称"
                  prop="batchName"
                  min-width="200"
                />
                <el-table-column
                  label="种养品种"
                  prop="varietyName"
                />
                <el-table-column
                  label="产量品级"
                  prop="grade"
                />
                <el-table-column label="产量">
                  <template slot-scope="scope">
                    {{ scope.row.yield }} {{ scope.row.unitName }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="产出时间"
                  prop="outputDate"
                />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPageY"
                :total-size="totalSizeY"
                @changePageSize="changePageSizeY"
                @changeCurrentPage="changeCurrentPageY"
              />
            </div>
            <div
              v-if="yieldConList.length !== 0"
              class="bottom"
            >
              <el-carousel
                arrow="never"
                :autoplay="false"
              >
                <el-carousel-item
                  v-for="(item, index) in yieldConList"
                  :key="index"
                >
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.varietyName }}
                      </div>
                      <div class="shadows-main">
                        <h4>总产量</h4>
                        <p v-if="item1.totalYield"><span>{{ item1.totalYield }}</span>斤</p>
                        <p v-else><span>{{ item1.totalYield || '暂无数据' }}</span></p>
                      </div>
                      <div class="shadows-main">
                        <h4>总种养面积</h4>
                        <p v-if="item1.totalYield"><span>{{ (item1.totalYield / item1.muYield).toFixed(2) }}</span>亩</p>
                        <p v-else><span>{{ item1.totalYield || '暂无数据' }}</span></p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>亩产量</h4>
                        <p v-if="item1.muYield"><span>{{ item1.muYield }}</span>斤/亩</p>
                        <p v-else><span>{{ item1.muYield || '暂无数据' }}</span></p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
      </div>
      <!-- 承租户权限 -->
      <div
        v-if="!status"
        class="information"
      >
        <div class="information-item">
          <i></i>
          <p>批次名称</p>
          <p>{{ batchData.batchName }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养设施</p>
          <p class="facility">
            <span
              v-for="item in batchData.batchFacilityMapperList"
              :key="item.facilityId"
            >{{ item.facilityName }}</span>
          </p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养品种</p>
          <p>{{ batchData.plantingTypeName }}-{{ batchData.varietyName }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养开始时间</p>
          <p>{{ batchData.assetDate }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养结束时间</p>
          <p>{{ batchData.completionDate }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>生长周期</p>
          <p v-if="batchData.nowDay">{{ batchData.nowDay }}天</p>
        </div>
      </div>
      <div
        v-if="!status"
        class="main-box"
      >
        <Main class="Output">
          <template v-slot:top-name>
            农事作业明细
          </template>
          <template v-slot:main-content>
            <div class="left">
              <piechart
                :cdata="conList.queryReport"
                :nowheight="'247px'"
                :nowwidth="'380px'"
              />
              <div class="left-box">
                <div class="shadows-top">
                  <p>{{ conList.startTime }} ~ {{ conList.endTime }}</p>
                </div>
                <div class="shadows-main">
                  <h4>执行农事作业次数</h4>
                  <p>{{ conList.total || 0 }} 次</p>
                </div>
                <div class="shadows-bottom">
                  <h4>执行农事作业类型</h4>
                  <div class="ma-box">
                    <span
                      v-for="(work, indexs) in queryReportList"
                      :key="indexs"
                    >
                      <span>{{ work.name }}</span>
                      <b>{{ work.number || 0 }}</b>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="pestdetailsData"
                stripe
                border
                height="81%"
                class="reportTable"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  label="农事作业类型"
                  prop="agriculturalTaskName"
                />
                <el-table-column label="执行人">
                  <template slot-scope="scope">
                    {{ scope.row.personBOList && scope.row.personBOList.lenth ? (scope.row.personBOList[0].name || '') : '' }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="投入农资名称"
                  prop="agriculturalMaterialName"
                />
                <el-table-column
                  label="执行时间"
                  min-width="200"
                  prop="assetDate"
                />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              />
            </div>
          </template>
        </Main>
        <Main class="details">
          <template v-slot:top-name>
            农资投入明细
          </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="agriculturalData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  label="农资名称"
                  prop="materialDTO.materialName"
                  min-width="140"
                />
                <el-table-column
                  label="投入量"
                  prop="assetQuantity"
                />
                <el-table-column
                  label="投入金额"
                  prop="assetValue"
                >
                </el-table-column>
                <el-table-column
                  label="经手人"
                  prop="personName"
                >
                </el-table-column>
                <el-table-column
                  v-if="false"
                  label="农资图片"
                >
                  <template>
                    <el-button type="text">查看图片</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="投入时间"
                  prop="assetDate"
                  min-width="100"
                >
                </el-table-column>
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPages"
                :total-size="totalSizes"
                @changePageSize="changePageSizes"
                @changeCurrentPage="changeCurrentPages"
              />
            </div>
            <div class="agricultural-statistics">
              <el-carousel
                arrow="never"
                :autoplay="false"
              >
                <el-carousel-item
                  v-for="(item, index) in agriculturalConList"
                  :key="index"
                >
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.agriculturalMaterialName }}
                      </div>
                      <div class="shadows-main">
                        <h4>总投入量</h4>
                        <p>
                          <span>{{ item1.assetQuantity }}</span>{{ item1.unitName }}
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>亩均投入量</h4>
                        <p>
                          <span>{{ item1.assetQuantityMu }}</span>{{ item1.unitName }}/亩
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总金额</h4>
                        <p>
                          <span>{{ item1.assetValue }}</span>元
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
        <Main class="yieldDetails">
          <template v-slot:top-name>
            产量明细
          </template>
          <template v-slot:main-content>
            <div class="left">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="yieldTableData"
                stripe
                border
                height="88%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  label="承租户名称"
                  prop="lesses"
                />
                <el-table-column
                  label="批次名称"
                  prop="batchName"
                  min-width="160"
                />
                <el-table-column
                  label="种养品种"
                  prop="varietyName"
                />
                <el-table-column
                  label="产量品级"
                  prop="grade"
                />
                <el-table-column label="产量">
                  <template slot-scope="scope">
                    {{ scope.row.yield }} {{ scope.row.unitName }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="产出时间"
                  prop="outputDate"
                />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPageY"
                :total-size="totalSizeY"
                @changePageSize="changePageSizeY"
                @changeCurrentPage="changeCurrentPageY"
              />
            </div>
            <div class="right">
              <div class="left-top">
                {{ reportForm.varietyName || '暂无数据' }}
              </div>
              <div class="left-main">
                <div>
                  <p>总产量</p>
                  <p v-if="reportForm.totalYield"><span>{{ reportForm.totalYield || '暂无数据' }}</span> 斤</p>
                  <p v-else><span>{{ '暂无数据' }}</span></p>
                </div>
                <div>
                  <p>亩产量</p>
                  <p v-if="reportForm.muYield"><span>{{ reportForm.muYield || '暂无数据' }}</span> 斤/亩</p>
                  <p v-else><span>{{ '暂无数据' }}</span></p>
                </div>
              </div>
            </div>
          </template>
        </Main>
      </div>
      
      <el-dialog title="投入农资" :visible="facilityDialogVisible"
        class="dialogRec" :before-close="()=>{facilityDialogVisible = false}">
        <div class="facility-list">
          <div v-for="(item,index) in batchFacilityMapperList" :key="index" class="facility-item">
            <div class="info-line">
              <div class="name">农资名称：</div><div class="value">{{ item.materialDTO.materialName }}</div>
            </div>
            <div class="info-line">
              <div class="name">投入量：</div><div class="value">
                {{ item.assetQuantity }} {{ item.materialDTO.unitName }}
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="facilityDialogVisible = false">
            关 闭
          </el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/kong.vue";
import Pagin from "../components/Pagination/index.vue";
import Search from "../components/search/index.vue";
import Main from "../components/main/index.vue";
import exceptionReport from "@/api/digital-production/statistical-report/agricultural-operation-report";
import yieldReport from "@/api/digital-production/statistical-report/yield-report";
import agriculturalReport from "@/api/digital-production/statistical-report/agricultural-report";
import managementtwo from "@/api/digital-production/agr-input-management/agr-input-managementtwo";
import batchReport from "@/api/digital-production/statistical-report/batch-report";
import zhechart from "../components/Echarts/components/linechart/chart.vue";
import piechart from "../components/Echarts/components/piechart/chart.vue";
import { mymixin } from "@/utils/mixin";
export default {
  components: {
    BaseMainSlot,
    Search,
    Main,
    zhechart,
    piechart,
    Pagin
  },
  mixins: [mymixin],
  data() {
    return {
      reset: {
        startDate: "",
        endDate: "",
        startTime: this.etPassYearFormatDate(),
        endTime: "",
        lesseeNo: "",
        batchNo: "",
        materialNo: "",
        status: 1
      },
      status: true,
      lesseeList: [],
      batchData: {
        batchName: "",
        batchFacilityMapperList: [],
        plantingTypeName: "",
        varietyName: "",
        assetDate: "",
        completionDate: "",
        nowDay: ""
      },
      batchList: [],
      // 承租户 环形图
      conList: [],
      abatchList: [],
      abnormalList: [],
      reportForm: {},
      // 农事任务信息
      pestdetailsData: [],
      // 农资
      agriculturalData: [],
      // 产量
      yieldTableData: [],
      // 每页的数据条数
      pageSize: 4,
      // 农事任务信息 表格分页
      // 当前页
      currentPage: 1,
      // 总条数
      totalSize: 0,
      // 农资 表格分页
      currentPages: 1,
      totalSizes: 0,
      // 产量 表格分页
      currentPageY: 1,
      totalSizeY: 0,
      agriculturalStauts: true,
      // 柱状图
      farmtaskcdata: {},
      agriculturalcdata: {},
      queryReportList: [],
      // 农资投入
      agriculturalConList: [],
      agriculturalConFrom: {},
      agriculturalAbatchList: [],
      agriculturalReportForm: {},
      queryagriculturalMaterialList: [],
      // 产量
      yieldConList: [],
      // 投入农资详情
      batchFacilityMapperList: [],
      facilityDialogVisible: false,
    };
  },
  created() {
    this.searchData();
    this.batchListData();
    // console.log()
    this.$nextTick(() => {
      let parentId = sessionStorage.parentId;
      if (parentId !== undefined) {
        // 承租户权限
        this.status = false;
      } else if (parentId === undefined) {
        // 基地权限
        this.status = true;
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.search();
    });
  },
  methods: {
    checkFacility(row) {
      this.batchFacilityMapperList = row.inputsRecordBOList || [];
      this.facilityDialogVisible = true;
    },
    // 搜索组件
    searchList(e) {
      // console.log(e);
      this.reset = e;
      this.batchListData(e);
    },
    // 重置
    resets() {
      let etPassYearFormatDate = this.etPassYearFormatDate();
      // let time = new Date()
      // let endTime = (time).getTime()
      const y = new Date(etPassYearFormatDate).getFullYear();
      const f = y + " 12-31 23:59:59:999";
      const endTime = new Date(f).getTime();
      // 重置搜索框
      this.reset = {
        startDate: "",
        endDate: "",
        startTime: etPassYearFormatDate,
        endTime: endTime,
        lesseeNo: "",
        materialNo: "",
        batchNo: "",
        status: 1
      };
      // 重置 批次单条批次展示信息
      this.batchData = {
        batchName: "",
        batchFacilityMapperList: [],
        plantingTypeName: "",
        varietyName: "",
        assetDate: "",
        completionDate: "",
        nowDay: ""
      };
      this.agriculturalStauts = true;
      this.$nextTick(() => {
        this.search();
      });
    },
    // 默认开始时间
    etPassYearFormatDate() {
      const y = new Date().getFullYear();
      // 第一天
      const f = y + " 01-01 00:00:00";
      const date = new Date(f).getTime() - 365 * 24 * 60 * 60 * 1000;
      // console.log(date)
      return date;
    },
    // 总体调用接口
    datalist() {
      let batchNoList = []
      if (this.reset.batchNo) {
        batchNoList = [this.reset.batchNo]
      } else if (!this.reset.batchNo && this.reset.lesseeNo) {
        batchNoList = this.batchList.map(el => { return el.batchNo })
      }
      this.batchNoList = batchNoList
      let params = {
        batchNoList,
        startTime: this.reset.startDate || this.reset.startTime,
        endTime: this.reset.endDate || this.reset.endTime,
        organizationNo: sessionStorage.organizationNo,
        batchType: sessionStorage.farmingTypeNo === 'dt' ? "BATCH" : "SINGLE"
      };
      this.params = params
      this.tableDataList(params);
      this.agriculturalDataList(params);
      this.yieldTableDataList(params);
      this.batchForm(this.reset.batchNo);
      this.getColumnChart(params);
      this.agriculturalChart(params);
      this.reportAllBatch(params);
      this.yieldreportAllBatch(params);
      this.agriculturalreportAllBatch(params);
    },
    // 农事作业明细
    tableDataList(e) {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          ...e,
          farmingTypeId: sessionStorage.farmingTypeNo,
          system: "SC"
        }
      };
      exceptionReport.agriculturalTaskList(params).then(res => {
        this.loading = false;
        let data = res.data;
        if (data) {
          // 赋值总条数
          this.totalSize = data.totalElements;
          this.pestdetailsData = data.content;
        } else {
          this.pestdetailsData = [];
          this.totalSize = 0;
        }
        let havline = this.pestdetailsData.length % this.pageSize;
        if (this.pestdetailsData.length < this.pageSize) {
          if (havline < this.pageSize) {
            const remain = this.pageSize - havline;
            for (var i = 0; i < remain; i++) {
              this.pestdetailsData.push({
                indflag: i + this.pestdetailsData.length - 1
              });
            }
          }
        }
      });
    },
    // 农资明细
    agriculturalDataList(e) {
      let params = {
        page: this.currentPages,
        size: this.pageSize,
        entity: {
          ...e,
          farmingTypeId: sessionStorage.farmingTypeNo,
          materialNo: this.reset.materialNo
        }
      };
      agriculturalReport.agriculturalMaterialInputList(params).then(res => {
        this.loading = false;
        let data = res.data;
        // 赋值总条数
        this.totalSizes = data.totalElements;
        this.agriculturalData = data.content;
        let havline = this.agriculturalData.length % this.pageSize;
        if (this.agriculturalData.length < this.pageSize) {
          if (havline < this.pageSize) {
            const remain = this.pageSize - havline;
            for (var i = 0; i < remain; i++) {
              this.agriculturalData.push({
                indflag: i + this.agriculturalData.length - 1
              });
            }
          }
        }
      });
    },
    // 产量明细
    yieldTableDataList(e) {
      let params = {
        page: this.currentPageY,
        size: this.pageSize,
        entity: {
          ...e,
          farmingTypeId: sessionStorage.farmingTypeNo
        }
      };
      yieldReport.partYieldList(params).then(res => {
        this.loading = false;
        // console.log(res)
        let data = res.data;
        // 赋值总条数
        this.totalSizeY = data.totalElements;
        this.yieldTableData = data.content;
        let havline = this.yieldTableData.length % this.pageSize;
        if (this.yieldTableData.length < this.pageSize) {
          if (havline < this.pageSize) {
            const remain = this.pageSize - havline;
            for (var i = 0; i < remain; i++) {
              this.yieldTableData.push({
                indflag: i + this.yieldTableData.length - 1
              });
            }
          }
        }
      });
    },
    // echarts
    getColumnChart(e) {
      exceptionReport.agriculturalTaskChartList(e).then(res => {
        let data = res.data;
        let xAxisone = [];
        if (data[0]) {
          xAxisone = data[0];
        }
        let addser = [];
        if (data[1]) {
          let listone = data[2];
          for (let zz in listone) {
            let addobj = {
              name: zz,
              type: "bar",
              data: listone[zz],
              barMaxWidth: 50,
              itemStyle: {
                normal: {
                  barBorderRadius: [6, 6, 0, 0]
                }
              }
            };
            addser.push(addobj);
          }
        }
        // xAxisone = xAxisone.unshift('')
        this.farmtaskcdata = {
          xAxisdata: xAxisone,
          xData: data[1],
          seriesData: addser,
          unitName: "次"
        };
      });
    },
    // agricultural echarts
    agriculturalChart(e) {
      agriculturalReport.agriculturalMaterialChartList(e).then(res => {
        let data = res.data;
        let xAxisone = [];
        if (data[0]) {
          xAxisone = data[0];
        }
        let addser = [];
        if (data[1]) {
          let listone = data[2];
          for (let zz in listone) {
            let addobj = {
              name: zz,
              type: "bar",
              data: listone[zz],
              barMaxWidth: 50,
              itemStyle: {
                normal: {
                  barBorderRadius: [6, 6, 0, 0]
                }
              }
            };
            addser.push(addobj);
          }
        }
        // xAxisone = xAxisone.unshift('')
        this.agriculturalcdata = {
          xAxisdata: xAxisone,
          xData: data[1],
          seriesData: addser,
          unitName: "元"
        };
      });
    },
    // 查询单个批次
    async batchForm(val) {
      if (!val) return;
      const { data: Batch } = await exceptionReport.getBatchList(val);
      this.batchData = Batch;
    },
    // 承租户下拉框数据
    async searchData() {
      const { data: lessee } = await exceptionReport.organizationList();
      this.lesseeList = lessee;
      managementtwo.getqueryList().then(res => {
        this.queryagriculturalMaterialList = res.data;
      });
    },
    agriculturalMate(e) {
      // 农资下拉框
      if (!e) {
        this.agriculturalStauts = false;
      } else {
        this.agriculturalStauts = true;
      }
    },
    // 批次下拉框数据
    async batchListData(val) {
      if (val) {
        // console.log(val);
        let endTime = this.dateToFormat(val.endTime);
        let startTime = "";
        if (val.startTime !== "") {
          startTime = this.dateToFormat(val.startTime);
        }
        var e = {
          startTime: startTime,
          endTime: endTime
        };
      }
      // 获取批次选择框数据
      const { data: Batch } = await exceptionReport.queryBatchList({
        lesseeNo: this.reset.lesseeNo
      });
      this.batchList = Batch;
    },
    open() {
      this.$confirm(`是否导出${this.$route.meta.title}.xlsx`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.exPort();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 导出
    async exPort() {
      // 点击导出搜索的数据
      this.downLoading = true;
      let batchName = "";
      let organizationName = "";
      let ExcelForm = {};
      let endTime = this.reset.endDate || this.reset.endTime;
      let startTime = this.reset.startDate || this.reset.startTime;
      const Year = new Date(startTime).getFullYear();
      if (this.reset.batchNo) {
        this.batchList.forEach(item => {
          if (item.batchNo === this.reset.batchNo) {
            batchName = item.batchName;
          }
        });
      }
      if (this.reset.lesseeNo) {
        this.lesseeList.forEach(item => {
          if (item.lesseeNo === this.reset.lesseeNo) {
            organizationName = item.organizationName;
          }
        });
      }
      ExcelForm = {
        batchNoList: this.batchNoList,
        organizationNo: sessionStorage.organizationNo,
        endTime: endTime,
        startTime: startTime,
        reportTitle: `${Year}年${batchName}${organizationName}`
      };
      const data = await batchReport.exportExcel(ExcelForm);
      this.downLoading = false;
      const blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=utf-8"
      });
      const link = document.createElement("a");
      // console.log()
      link.download = this.$route.meta.title + ".xlsx";
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    },
    // 转化数据 跑马灯 农事
    async reportAllBatch(e) {
      // 农事作业
      //  按批次统计 start
      if (e) {
        var params = {
          ...e,
          farmingTypeId: sessionStorage.farmingTypeNo,
        };
      }
      const {
        data: abatchReport
      } = await exceptionReport.abatchReportInputList(params);
      abatchReport.forEach(item => {
        item.workTypeList.forEach(work => {
          work.value = work.number;
          delete work.number;
        });
        this.$set(item, "nowMonthTaskPie", [
          {
            name: "",
            type: "pie",
            selectedMode: "single",
            radius: ["40%", "70%"],
            center: ["50%", "50%"],
            clockwise: false,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 1
            },
            label: {
              normal: {
                show: true,
                formatter: "{b}\n{d}% ",
                textStyle: {
                  color: "#fff"
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.3)"
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            data: item.workTypeList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(255, 255, 255, 1)"
              }
            }
          }
        ]);
      });
      this.abatchList = this.traverList(abatchReport, 2);
      console.log(this.abatchList)
      // 统计查询
      const { data: queryReport } = await exceptionReport.queryReportFormList(
        e
      );
      let total = 0;
      for (let i = 0; i < queryReport.length; i++) {
        total = total + queryReport[i].number;
      }
      // 转化时间
      let endTime = this.dateToFormatname(e.endTime);
      let startTime = "";
      if (e.startTime !== "") {
        startTime = this.dateToFormatname(e.startTime);
      }
      this.queryReportList = queryReport;
      // 转化图表数据
      queryReport.forEach(work => {
        work.value = work.number;
        work.name = work.agriculturalWorkTypeName;
      });
      let abatch = [
        {
          name: "",
          type: "pie",
          selectedMode: "single",
          radius: ["40%", "70%"],
          center: ["50%", "50%"],
          clockwise: false,
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 1
          },
          label: {
            normal: {
              show: true,
              formatter: "{b}\n{d}% ",
              textStyle: {
                color: "#fff"
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            }
          },
          data: queryReport,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(255, 255, 255, 1)"
            }
          }
        }
      ];
      // end
      this.$nextTick(() => {
        this.conList = {
          queryReport: abatch,
          startTime: startTime,
          endTime: endTime,
          total: total
        };
      });
    },
    // 转化数据 跑马灯 产量
    async yieldreportAllBatch(e) {
      // 产量统计 start
      const { data: yieldAllBatch } = await yieldReport.reportAllBatch(e);
      this.yieldConList = this.traverList(yieldAllBatch, 2);
      this.reportForm = yieldAllBatch[0] || {};
      // end
    },
    // 转化数据 跑马灯 农资
    async agriculturalreportAllBatch(e) {
      let params = {
        ...e,
        farmingTypeId: sessionStorage.farmingTypeNo,
        materialNo: this.reset.materialNo
      };
      // 农资投入 start
      // 按农资统计
      const {
        data: agriculturalAllBatch
      } = await agriculturalReport.queryReportFormList(params);
      // 按批次统计
      const {
        data: agriculturalReports
      } = await agriculturalReport.abatchReportInputList(params);
      this.agriculturalConList = this.traverList(agriculturalAllBatch, 3);
      this.agriculturalConFrom = agriculturalAllBatch[0];
      if (this.agriculturalStauts === true) {
        this.agriculturalAbatchList = this.traverList(agriculturalReports, 2);
      } else {
        this.agriculturalAbatchList = this.traverList(agriculturalReports, 3);
      }
      this.agriculturalReportForm = agriculturalAllBatch[0] || {};
      // end
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      const list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      return list;
    },
    dateFormat(row, colnum) {
      if (row.assetDate) {
        // console.log(row)
        return this.$moment(row[colnum.property]).format(
          "YYYY年-MM月-DD日 MM:SS:mm"
        );
      }
    },
    search() {
      this.currentPage = 1;
      this.currentPages = 1;
      this.currentPageY = 1;
      this.datalist();
      this.agriculturalsearch();
    },
    agriculturalsearch() {
      if (this.reset.materialNo) {
        this.agriculturalStauts = false;
      } else {
        this.agriculturalStauts = true;
      }
      this.$nextTick(() => {
        this.agriculturalDataList(this.params);
        this.agriculturalreportAllBatch(this.params);
      });
    },
    // 表格分页
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.tableDataList(this.params);
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.tableDataList(this.params);
    },
    // 表格分页
    changePageSizes(pageSize) {
      this.pageSize = pageSize;
      this.agriculturalDataList(this.params);
    },
    changeCurrentPages(currentPage) {
      this.currentPages = currentPage;
      this.agriculturalDataList(this.params);
    },
    // 表格分页
    changePageSizeY(pageSize) {
      this.pageSize = pageSize;
      this.yieldTableDataList(this.params);
    },
    changeCurrentPageY(currentPage) {
      this.currentPageY = currentPage;
      this.yieldTableDataList(this.params);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/report.scss";
::v-deep .common-layout {
  overflow: auto !important;
  // .zhcontent {
  //   height: calc(100% - 50px) !important;
  // }
}
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
}
// 基地权限
.lesseeOutput {
  // height: 265px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
  }
}
.outputdetails {
  // height: 580px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    justify-content: flex-start;
    .top {
      padding: 5px;
      width: 100%;
      height: 320px;
      position: relative;
    }
    .agricultural-statistics {
      height: 380px;
      width: 100%;
      position: relative;
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          border-radius: 0;
          height: 78%;
          width: 49%;
          display: flex;
          align-items: center;
          flex-direction: row;
          position: relative;
          justify-content: space-around;
          align-content: center;
          border-start-start-radius: 8px;
          border-start-end-radius: 8px;
          border: 1px solid #005e77;
          box-shadow: 0 0 3px 1px #003b4e inset;
          padding: 1px 10px;
          .imgl-top {
            box-sizing: content-box;
            text-align: center;
            font-size: 12px;
            width: 174px;
            height: 43px;
            line-height: 35px;
            background: url("~@/assets/statistical-report/top-ellipse.png") 100%
              100% no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 0%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          > i {
            display: inline-block;
            width: 90%;
            left: 5%;
            position: absolute;
            top: -1px;
            border-top: 1px solid;
            border-image: linear-gradient(90deg, #00fff700, #00fff7, #00fff700)
              30 30;
          }
          .imgdet-left {
            background: url("~@/assets/statistical-report/agricultural-operation-report/operation-report.png")
              100% 100% no-repeat;
            background-size: 100% 100%;
            height: 90%;
            min-width: 340px;
            flex: 0.8;
            .shadows-top {
              box-sizing: content-box;
              text-align: center;
              font-size: 12px;
              width: 100%;
              box-sizing: border-box;
              padding-top: 15px;
            }
            > div {
              width: 100%;
              h4 {
                padding: 0;
                margin: 0;
                text-align: center;
                letter-spacing: 1px;
                font-size: 14px;
              }
              p {
                padding: 0;
                margin: 10px 0 0 0;
                // width: 100%;
                text-align: center;
                letter-spacing: 1px;
                font-size: 16px;
                span {
                  font-size: 33px;
                }
              }
            }
            div:nth-child(3) {
              margin-top: -6px;
            }
            .shadows-main {
              padding: 18px 0 0 0;
              height: 80px;
            }
            .shadows-bottom {
              height: 80px;
              .ma-box {
                padding: 0 2px;
                height: 60px;
                text-align: center;
                overflow-y: auto;
                > span {
                  font-size: 12px;
                  background: rgba(3, 72, 94, 1);
                  border: 1px solid #1093b6;
                  opacity: 1;
                  border-radius: 40px;
                  display: inline-flex;
                  justify-content: space-between;
                  align-items: center;
                  align-content: center;
                  padding: 1px 1px 1px 3px;
                  margin-left: 2px;
                  margin-top: 5px;
                  span {
                    font-size: 12px;
                  }
                  b {
                    margin-left: 2px;
                    display: inline-block;
                    padding: 3px 6px;
                    text-align: center;
                    background: rgba(0, 193, 167, 1);
                    border: 1px solid #00ffba;
                    border-radius: 50%;
                    opacity: 1;
                  }
                }
              }
              .ma-box::-webkit-scrollbar {
                width: 2px;
              }
            }
          }
          .imgdet-right {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
          }
        }
        .imgdet::-webkit-scrollbar {
          height: 2px;
        }
      }
    }
  }
}
// 所有批次 -农资
.agriculturalOutput {
  // height: 310px;
  // 基地权限
  // height: 265px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
  }
  .label-input {
    display: flex;
    margin: 10px 0 10px 10px;
    align-items: center;
  }
}
.agriculturaldetails {
  // height: 1000px;
  transition: 1s linear;
  .label-input {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 10px 0 10px 10px;
  }
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .top {
      padding: 5px;
      width: 100%;
      height: 320px;
      position: relative;
    }
    // 农资
    .agricultural-statistics {
      height: 420px;
      width: 43%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/batch-report/agricultural-bj1.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 78%;
          width: 30%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            // top: -7%;
            text-align: center;
            font-size: 14px;
            width: 100%;
            line-height: 41px;
            width: 140px;
            // background: rgba(1, 59, 77, 1);
            // border: 1px solid #4affda;
            // box-shadow: 0px 0 7px .5px rgb(255, 255, 255) inset;
            // opacity: 1;
            // border-radius: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 4px;
              margin: 0px 0 4px;
              font-size: 14px;
              text-align: center;
              letter-spacing: 2px;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 2px;
              span {
                font-size: 22px;
              }
            }
          }
          div:nth-child(3) {
            margin: 30px 0;
          }
          .shadows-main {
            margin: 5px 0 0 0;
            padding: 8px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            margin: 5px 0 0 0;
            height: 80px;
          }
        }
      }
    }
    // 批次
    .batch-statistics {
      height: 420px;
      width: 49%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/batch-report/agricultural-bj.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 80%;
          width: 46%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            // top: -7%;
            text-align: center;
            font-size: 14px;
            width: 126px;
            line-height: 41px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 6px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              span {
                font-size: 18px;
              }
            }
          }
          .shadows-main {
            margin: 5px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            height: 80px;
          }
        }
      }
    }
  }
}
.agriculturaldet {
  ::v-deep .main-content {
    // 农资
    .agricultural-statistics {
      width: 13%;
      .imgl {
        .imgdet {
          height: 78%;
          width: 100%;
        }
      }
    }
    // 批次
    .batch-statistics {
      height: 420px;
      width: 76%;
      position: relative;
      .imgl {
        justify-content: space-evenly;
        .imgdet {
          height: 80%;
          width: 32%;
        }
      }
    }
  }
}
// 所有批次 -产量
.yielddetails {
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    display: flex;
    justify-content: space-between;
    .bottom {
      height: 250px;
      width: 35%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/batch-report/yield.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 89%;
          width: 48%;
          margin-bottom: 30px;
          display: flex;
          align-items: center;
          flex-direction: column;
          .shadows-top {
            box-sizing: content-box;
            position: relative;
            width: 120px;
            text-align: center;
            line-height: 35px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 6px 0 0 0;
              letter-spacing: 1px;
              text-align: center;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              letter-spacing: 1px;
              text-align: center;
              span {
                font-size: 20px;
              }
            }
          }
          .shadows-main {
            margin: 2px 0 0 0;
            height: 70px;
          }
          div:nth-child(3) {
            margin-top: 0px;
          }
          .shadows-bottom {
            padding: 5px 0 0 0;
            height: 80px;
          }
        }
      }
    }
    .top {
      padding: 5px;
      width: 64%;
      height: 250px;
      position: relative;
    }
  }
}
// 承租户权限
::v-deep .main-box {
  flex-direction: column;
}
.Output {
  width: 100%;
  // height: calc(100% - 30px);
  margin-bottom: 0 !important;
  ::v-deep .main-content {
    position: relative !important;
    // height:100%;
    padding: 50px 12px 30px;
    display: flex;
    justify-content: space-around;
  }
  .left {
    width: 42%;
    height: 230px;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    .shadows-top {
      line-height: 20px;
      p {
        font-size: 12px;
      }
    }
    .left-box {
      // width: 80%;
      min-width: 300px;
      height: 100%;
      background: url("~@/assets/statistical-report/agricultural-operation-report/le-bj.png")
        100% 100% no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      h4 {
        width: 100%;
        margin: 12px 0 !important;
        text-align: center;
      }
      p {
        width: 100%;
        text-align: center;
      }

      .shadows-bottom {
        height: 80px;
        .ma-box {
          padding: 0 2px;
          height: 60px;
          text-align: center;
          overflow-y: auto;
          > span {
            font-size: 12px;
            background: rgba(3, 72, 94, 1);
            border: 1px solid #1093b6;
            opacity: 1;
            border-radius: 40px;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            padding: 1px 1px 1px 4px;
            margin-left: 2px;
            margin-top: 5px;
            span {
              font-size: 12px;
            }
            b {
              margin-left: 3px;
              display: inline-block;
              padding: 3px 6px;
              text-align: center;
              background: rgba(0, 193, 167, 1);
              border: 1px solid #00ffba;
              border-radius: 50%;
              opacity: 1;
            }
          }
        }
        .ma-box::-webkit-scrollbar {
          width: 2px;
        }
      }
    }
  }
  .right {
    width: 56%;
    height: 260px;
    .el-table {
      width: 100%;
      margin-top: 20px;
    }
  }
}

.details {
  width: 100%;
  // height: calc(100%);
  margin-bottom: 0 !important;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    display: flex;
    justify-content: space-around;
    .top {
      padding: 25px 0 0 8px;
      width: 59%;
      height: 310px;
      position: relative;
    }
    // 农资
    .agricultural-statistics {
      height: 310px;
      width: 40%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/batch-report/le-ar.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 83.5%;
          width: 31%;
          margin-bottom: 10%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            top: 7%;
            text-align: center;
            font-size: 14px;
            width: 166px;
            // height: 26px;
            // padding: 0 10px;
            // box-sizing: border-box;
            line-height: 45px;
            // background: rgba(1, 59, 77, 1);
            // border: 1px solid #4affda;
            // box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
            // opacity: 1;
            // border-radius: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 6px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              span {
                font-size: 18px;
              }
            }
          }
          div:nth-child(3) {
            margin: 8px 0;
          }
          .shadows-main {
            margin: 5px 0 0 0;
            padding: 8px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            height: 80px;
          }
        }
      }
    }
  }
}
.yieldDetails {
  width: 100%;
  // height: calc(100% - 30px);
  margin-bottom: 0 !important;
  ::v-deep .main-content {
    position: relative !important;
    display: flex;
    align-items: flex-start !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    padding: 50px 12px 30px;
    .right {
      width: 25%;
      height: 268px;
      background: url("~@/assets/statistical-report/batch-report/pa-ar.png")
        100% 100% no-repeat;
      background-size: 100% 100%;
      position: relative;
      .left-top {
        box-sizing: content-box;
        // top: 7%;
        text-align: center;
        margin: 0 auto;
        font-size: 14px;
        width: 166px;
        line-height: 40px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .left-main {
        width: 100%;
        display: flex;
        height: 80%;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-around;
        font-size: 20px;
        div {
          flex: 1;
          flex-direction: column;
          align-items: center;
          flex-wrap: nowrap;
          justify-content: space-around;
        }
        p {
          width: 100%;
          letter-spacing: 1px;
          text-align: center;
          span {
            font-size: 28px;
          }
        }
      }
    }
    .left {
      width: 74%;
      padding: 20px 30px 20px 0;
      height: 320px;
      position: relative;
      .el-table {
        width: 100%;
      }
    }
  }
}
::v-deep #chart {
  > div {
    bottom: 0;
  }
}
.facility {
  width: 210px;
  height: 20px;
  padding: 0 20px;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  span {
    white-space: nowrap;
    // margin-left: 10px;
  }
}
.facility::-webkit-scrollbar {
  height: 4px;
}
::v-deep .el-table {
  // height: 30% !important;
  background-color: transparent;
  color: #fff;
  &::before {
    background-color: transparent;
  }
  &::after {
    width: 0;
  }
  .el-table__empty-text {
    color: #fff;
    font-size: 12px !important;
  }
  td,
  th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-left: 0;
    border-color: #1093b6 !important;
  }
  .el-table-column--selection {
    border-left: 1px solid #1093b6 !important;
  }
}

::v-deep .el-table--border {
  border: 1px solid #1093b6 !important;
  border-start-start-radius: 15px !important;
  border-start-end-radius: 15px !important;
  overflow: hidden;
}
::v-deep .el-table th {
  background-color: #096f8f;
}
::v-deep .el-table thead {
  color: #fff;
  font-weight: bold;
}
::v-deep .el-table td,
::v-deep .el-table th {
  text-align: center;
  padding: 5px 0 !important;
}
// ::v-deep .el-table__body-wrapper {
//   height: 100%;
// }
::v-deep .is-active .el-carousel__button {
  width: 16px !important;
  height: 16px !important;
  background: rgba(151, 255, 241, 0.39) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
}
::v-deep .el-carousel__button {
  width: 16px !important;
  height: 16px !important;
  background: rgba(8, 113, 146, 0.39) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
}
::v-deep .el-carousel__indicator--horizontal {
  padding: 0 10px !important;
}
::v-deep .el-input__inner {
  font-size: 12px !important;
}
.facility-list{
  display: flex;
  justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  .facility-item{
    width: 400px;
    max-width: 30%;
    min-width: 30%;
    margin-right: 3%;
    margin-bottom: 10px;
    // height: 80px;
    border-radius: 5px;
    // border: 1px solid #ccc;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
    padding: 10px 20px;

    .info-line{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      font-size: 14px;
      &:not(:last-child){
        margin-bottom: 10px;
      }
      .name{
        text-align: left;
        width: 80px;
        flex-shrink: 0;
      }
      .value{
        width: 100%;
        text-align: left;
        font-weight: normal;
      }
    }
  }
}
</style>
